import { useMemo } from "react";
import { ColorPicker, Button } from "antd";
import { colorFormateHex } from "@/utils/formate";
import PropTypes from "prop-types";

const ColorPickerComponent = ({
  defaultValue = "#1677ff",
  onChange,
  style,
  size = "middle",
  width = "100%",
  ...resProps
}) => {
  const value = useMemo(() => resProps.value || defaultValue, [resProps.value, defaultValue]);

  const showText = useMemo(() => colorFormateHex(value) || defaultValue, [value, defaultValue]);

  const textShadow = "1px 0px #000, -1px 0px #000, 0px 1px #000, 0px -1px #000, 1px 1px #000, -1px -1px #000";

  const handleChange = (value) => {
    const data = value.toHexString();
    onChange && onChange(data);
  };

  return (
    <ColorPicker {...resProps} value={value} size={size} onChange={handleChange}>
      <Button style={{ backgroundColor: value, textShadow, width, color: "#fff" }} size={size}>
        {showText.toLocaleUpperCase()}
      </Button>
    </ColorPicker>
  );
};

ColorPickerComponent.propTypes = {
  defaultValue: PropTypes.string,
  onChange: PropTypes.func,
  style: PropTypes.object,
  size: PropTypes.oneOf(["small", "middle", "large"]),
  width: PropTypes.string,
};

export default ColorPickerComponent;
